<template>
    <div id="homeheader">
        <HomeLocation></HomeLocation>
        <Search  ref='fixedBar' :isfixed='isfixed'></Search>
    </div>
</template>
<script>
    import Search from './Search'
    import HomeLocation from './HomeLocation'
    export default {
        components: {
            Search,
            HomeLocation
        },
        data(){
            return {
                isfixed:false,
                offsettop:0
            }
        },
        mounted() {
            this.offsettop = this.$refs.fixedBar.$el.offsetTop
            window.addEventListener('scroll',this.handlescroll)
        },
        destroyed() {
            window.removeEventListener('scroll',this.handlescroll)
        },
        methods:{
            handlescroll(){
                // console.log('发现',this.offsettop)
                var scrolltop = window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
                // console.log('滚动',scrolltop)
                if(scrolltop>=this.offsettop){
                    this.isfixed=true
                }else{
                    this.isfixed=false
                }
            }
        }

    }
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    #homeheader
        background-color $bgColor
</style>
